{extend name="v1/layout/base"}
{block name="content"}
<div class="layuimini-main">

  <fieldset class="table-search-fieldset xk-search-status" id="xk-search-status">
    <legend>搜索信息</legend>
    <div style="margin: 10px 10px 10px 10px">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card-body layui-form layui-form-pane">
            <div class="layui-row layui-col-space10 layui-form-item">
              <div class="layui-col-lg12">
                <label class="layui-form-label">搜索关键词</label>
                <div class="layui-input-block">
                  <input type="text" name="keywords" placeholder="请输入搜索关键词" id="keywords" class="layui-input">
                </div>
              </div>
            </div>
            <div class="layui-row">
              <div class="layui-col-xs4">&nbsp;</div>
              <div class="layui-col-xs4">
                <button type="button" class="layui-btn layui-btn-primary layui-btn-radius close-search"><i class="layui-icon">&#x1007;</i>关闭</button>
                <button type="button" class="layui-btn layui-btn-normal layui-btn-radius xk-dosearch">搜索<i class="layui-icon"></i></button>
              </div>
              <div class="layui-col-xs4">&nbsp;</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </fieldset>

  <script type="text/html" id="toolbar">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-black  layui-btn-sm" lay-event="reseve"><i class="layui-icon">&#xe63d;</i></button>
    </div>
  </script>

      <!--<button class="layui-btn layui-btn-normal  layui-btn-sm" lay-event="add" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/System/menuCreate"><i class="layui-icon">&#xe654;</i>添加</button>-->
      <!--<button class="layui-btn layui-btn-danger  layui-btn-sm" lay-event="delete" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/System/menuDestroy"><i class="layui-icon">&#xe640;</i>删除选中</button>-->
      <!--<button class="layui-btn layui-btn-warm  layui-btn-sm" lay-event="showStatus" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/System/menuChanageValue"><i class="layui-icon layui-icon-praise"></i>显示选中</button>-->
      <!--<button class="layui-btn layui-btn-warm  layui-btn-sm" lay-event="hideStatus" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/System/menuChanageValue"><i class="layui-icon layui-icon-tread"></i>隐藏选中</button>-->
  <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

  <script type="text/html" id="currentTableBar">
  </script>
    <!--<button class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm" lay-event="add" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/System/menuCreate"><i class="layui-icon">&#xe654;</i>添加</button>-->
    <!--<button class="layui-btn layui-btn-radius layui-btn-warm layui-btn-sm" lay-event="show" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/System/menuEdit"><i class="layui-icon">&#xe642;</i>修改</button>-->
    <!--<button class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" lay-event="delete" data-url="/{:config('manage.manage_name')}/{:config('manage.version')}/System/menuDestroy"><i class="layui-icon">&#xe640;</i>删除</button>-->
  <!-- 状态按钮 -->
  <script type="text/html" id="status">
    <input type="checkbox" disabled lay-filter="status" value="{{d.menu_id}}" name="status" lay-skin="switch" lay-text="显示|不显示" {{d.status==1?'checked':''}} />
  </script>
  <!-- 图片 如果存在的话 -->
  <!-- <script type="text/html" id="picurlshow">
      <img src="{{d.picurl?d.picurl:'__XKSHOP__images/no_pic.jpg'}}" style="width:100px; height:50px" />
  </script> -->
  <script type="text/html" id="icons">
    <i class="layui-icon {{d.icon}}"></i>
    <input type="hidden" class="layui-input" lay-filter="icon" value="{{d.menu_id}}" name="icon" />
  </script>
</div>
{/block}
{block name="myScript"}
<script>
  layui.use(['table', 'layer', 'util', 'form', 'treetable'], function() {
    var $ = layui.jquery,
      table = layui.table,
      treetable = layui.treetable,
      layer = layui.layer,
      util = layui.util,
      form = layui.form,
      insTab = treetable.render({
        elem: '#currentTableId',
        url: '/{:config("manage.manage_name")}/{:config("manage.version")}/System/menu',
        toolbar: '#toolbar',
        defaultToolbar: ['filter',{
          title: '搜索',
          layEvent: 'search',
          icon: 'layui-icon-search'
        }],
        page: false,
        tree: {
          iconIndex: 1,
          isPidData: true,
          openName: 'menu_id',
          idName: 'menu_id',
          pidName: 'parent_id',
          arrowType: 'arrow2',
          getIcon: 'ew-tree-icon-style2'
        },
        cols: [
          [
            {
              field: 'menu_id',
              width: '15%',
              title: 'ID'
            },
            {
              field: 'icon',
              width: '15%',
              title: '菜单图标',
              templet: '#icons'
            },
            {
              field: 'menu_name',
              width: '25%',
              title: '菜单名称'
            },
            {
              field: 'sign',
              width: '20%',
              title: '菜单标志'
            },
            {
              field: 'linkurl',
              title: '菜单链接',
              width: '15%'
            },
            {
              field: 'order_id',
              width: '10%',
              align: 'center',
              edit: 'number',
              title: '排序ID'
            },
            {
              field: 'status',
              title: '是否显示',
              width: '12%',
              templet: "#status"
            },
            {
              field: 'update_time',
              width: '25%',
              title: '最后更新时间',
              align: "center",
            }
          ]
        ],
        id: 'table_ids',
        skin: 'line',
        done: function() {
          layer.closeAll('loading');
        }
      });
    // 顶部操作工具
    treetable.on('toolbar(currentTableId)', function(obj) {
      var url = $(this).attr('data-url'),
        id_arr = getCheckValue();
      switch (obj.event) {
        case 'reseve':
          insTab.reload();
          break;
        case 'add':
          var index = layer.open({
            title: '系统菜单添加',
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['100%', '100%'],
            content: url,
            cancel: function() {
              insTab.reload();
            }
          });
          break;
        case 'delete':
          if (id_arr) {
            layer.msg('您确定要删除选中的系统菜单吗？', {
              time: 0,
              btn: ['确定', '取消'],
              yes: function(index) {
                layer.close(index);
                https(url, {
                  id_str: id_arr
                }, 'post', true, '正在执行删除').then(res => {
                  if (res.result_code == 200) {
                    insTab.reload();
                  }
                })
              },
              btn2: function(index) {
                layer.close(index);
              }
            });
          } else {
            layer.msg("请选择需要操作的数据", {
              icon: 5,
              time: 1000
            });
          }
          break;
        case 'showStatus':
          const id_arrs = getCheckValuex();
          if (id_arrs) {
            layer.msg('您确定要显示选中的系统菜单吗？', {
              time: 0,
              btn: ['确定', '取消'],
              yes: function(index) {
                layer.close(index);
                https(url, {
                  by_key: id_arrs,
                  key: 'status',
                  value: 1
                }, 'post', true, '正在执行显示').then(res => {
                  if (res.result_code == 200) {
                    insTab.reload();
                  }
                })
              },
              btn2: function(index) {
                layer.close(index);
              }
            });
          } else {
            layer.msg("请选择需要操作的数据", {
              icon: 5,
              time: 1000
            });
          }
          break;
        case 'hideStatus':
          if (id_arr) {
            layer.msg('您确定要隐藏选中的系统菜单吗？', {
              time: 0,
              btn: ['确定', '取消'],
              yes: function(index) {
                layer.close(index);
                https(url, {
                  by_key: id_arr,
                  key: 'status',
                  value: 0
                }, 'post', true, '正在执行隐藏').then(res => {
                  if (res.result_code == 200) {
                    insTab.reload();
                  }
                })
              },
              btn2: function(index) {
                layer.close(index);
              }
            });
          } else {
            layer.msg("请选择需要操作的数据", {
              icon: 5,
              time: 1000
            });
          }
          break;
        case 'search':
          $("#xk-search-status").removeClass('xk-search-status');
          break;
      }
    })
    // 列表工具栏目
    treetable.on('tool(currentTableId)', function(obj) {
      var data = obj.data,
        event = obj.event,
        keywords = $("#keywords").val(),
        url = $(this).attr('data-url');
      switch (event) {
        case 'add':
          url = url + '/parent_id/' + data.menu_id;
          var index = layer.open({
            title: data.menu_name + '菜单的子菜单添加',
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['100%', '100%'],
            content: url,
            cancel: function() {
              insTab.reload();
            }
          });
          break;
        case 'show':
          url = url + '/menu_id/' + data.menu_id;
          var index = layer.open({
            title: data.menu_name + '菜单编辑',
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['100%', '100%'],
            content: url,
            cancel: function() {
              insTab.reload();
            }
          });
          break;
        case 'delete':
          //确定要删除吗？
          layer.msg('您确定要删除' + obj.data.menu_name + '这个系统菜单吗？', {
            time: 0, //不自动关闭
            btn: ['确定', '取消'],
            yes: function(index) {
              layer.close(index);
              https(url, {
                id_str: obj.data.menu_id
              }, 'post', true, '正在删除').then(res => {
                if (res.result_code == 200) {
                  insTab.reload();
                }
              })
            },
            btn2: function(index) {
              layer.close(index);
            }
          });
          break;
      }
    })
    // 监听单元格编辑事件
    treetable.on('edit(currentTableId)', function(obj) {
      var value = obj.value,
        by_key = obj.data.menu_id,
        key = obj.field;
      if (value == '') {
        insTab.reload();
        return false;
      }
      var url = "{:url('/'.config('manage.manage_name').'/'.config('manage.version').'/System/menuChanageValue')}";
      https(url, {
        by_key: by_key,
        key: key,
        value: value
      }, 'post', true, '正在修改').then(res => {
        if (res.result_code == 200) {
          insTab.reload();
        }
      })
    });
    form.on('switch(status)', function(obj) {
      if (obj.elem.checked == true) {
        var value = 1;
      } else {
        var value = 0;
      }
      // 动态修改 开始
      var url = "{:url('/'.config('manage.manage_name').'/'.config('manage.version').'/System/menuChanageValue')}";
      https(url, {
        by_key: this.value,
        key: this.name,
        value: value
      }, 'post', true, '正在修改').then(res => {
        if (res.result_code == 200) {
          insTab.reload();
        }
      })
    });
    // 执行搜索
    $(".xk-dosearch").click(function() {
      var keywords = $("#keywords").val();
      if (keywords) {
        insTab.filterData(keywords);
      } else {
        insTab.clearFilter();
      }
    })
    // 获取选中项
    function getCheckValue() {
      var id_arr = [],
        id_str = '';
      insTab.checkStatus().map(function(d) {
        if (d.LAY_INDETERMINATE == false) {
          id_arr.push(d.menu_id);
        }
      });
      id_str = id_arr.join(',');
      return id_str;
    }

    function getCheckValuex() {
      var id_arr = [],
        id_str = '';
      insTab.checkStatus().map(function(d) {
        if (d.LAY_CHECKED == true) {
          id_arr.push(d.menu_id);
        }
      });
      id_str = id_arr.join(',');
      return id_str;
    }
  });
</script>
{/block}
